<template>
  <basePage :page-params="pageParams">
    <view style="padding: 0 20rpx;">
      <MenuCell
        :cell-data.sync="menuList"
        :cell-column="cellColumn"
        @handelCellMethod="showPopFn"
      />
      <u-textarea
        v-model="menuList.desc"
        count
        :maxlength="200"
        placeholder="请输入描述，有助于我们更好的处理售后问题"
      />
      <view class="btn-box">
        <button class="btn " @click.stop="$u.throttle(closeEvent, 500)">取消</button>
        <button class="btn confirm-btn " @click.stop="$u.throttle(quitEvent, 500)">提交</button>
      </view>
    </view>
    <!-- 申请理由 -->
    <u-popup :show="accountShow" :round="10" mode="bottom" :closeable="true" @close="close">
      <view class="sort-topbar">
        <view class="sort-list">
          <u-radio-group
            v-model="radiovalue"
            placement="column"
          >
            <u-radio
              v-for="(item, index) in radiolist"
              :key="index"
              :custom-style="{marginBottom: '48rpx'}"
              :label="item.text"
              :name="item.code"
              active-color="#f53"
              @change="radioChange(item)"
            />
          </u-radio-group>
        </view>
      </view>
    </u-popup>
  </basePage>
</template>

<script>
import basePage from '@/components/base-page'
import MenuCell from '@/components/menu-cell'
import { queryCancelReason, applyForAfterSale } from '@/api/yc_userInfo';
export default {
  name: 'Index',
  components: {
    basePage,
    MenuCell
  },
  data() {
    return {
      pageParams: {
        state: null,
        emptyTitle: '',
        errorTitle: '',
        showButton: false
      },
      cellColumn: [
        {
          label: '兑换订单号',
          fields: ['orderId'],
          contentStyle: 'font-size: 24rpx;color: #808080;padding-right: 32rpx;'
        },
        {
          label: '申请理由',
          showRightIcon: true,
          fields: ['reasontext'],
          methodName: 'showPopFn',
        },
        {
          label: '申请理由描述',
        }
      ],
      menuList: {
        orderId: '',
        reason: '',
        reasontext: '',
        desc: '',
      },
      orderSn: '', //父页面传过来的
      nature: '',
      itemId: '',
      accountShow: false,
      radiolist: [],
      radiovalue: '',
    }
  },
  onLoad(option) {
    const { nature, orderId, orderSn, skuId } = option
    this.menuList.orderId = orderId
    this.orderSn = orderSn
    this.nature = nature
    this.itemId = skuId
  },
  mounted() {
    this.initPageFn()
  },
  methods: {
    initPageFn() {
      const params = {
        nature: this.nature,
        type: 2
      }
      queryCancelReason(params).then((res) => {
        if (res.code == 0) {
          this.radiolist = res.data
        }
      })
    },
    showPopFn() {
      this.accountShow = true
    },
    close() {
      this.accountShow = false
    },
    radioChange(n) {
      this.menuList.reason = n.code
      this.menuList.reasontext = n.text
    },
    quitEvent() {
      const params = {
        desc: this.menuList.desc,
        itemId: this.itemId,
        orderSn: this.orderSn,
        reason: this.menuList.reason
      }
      applyForAfterSale(params).then((res) => {
        if (res.code == 0) {
          uni.navigateBack({
            delta: 1
          })
        } else {
          this.$u.toast(res.msg)
        }
      })
    },
    closeEvent() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.btn-box{
  position: absolute;
  left: 64rpx;
  bottom: 68rpx;
  display: flex;
  .confirm-btn{
    width: 312rpx;
    height: 64rpx;
    line-height: 64rpx;
    color: #fff;
    background: linear-gradient(128.8deg, #ff795f 0%, #ee3d1a 100%);
    font-size: 28rpx;
    margin-left: 26rpx;
  }
  .btn{
    border: 0 !important;
    border-radius: 8rpx;
    width: 312rpx;
    height: 64rpx;
    line-height: 64rpx;
  }
}
.sort-topbar{
  display: flex;
  padding: 82rpx 0 16rpx 32rpx;
  flex-wrap:wrap;
  .sort-list{
    width: 684rpx;
    margin:0 16rpx 16rpx 0;
  }
}
/deep/ .u-textarea {
  padding: 0 9px 30rpx !important;
}
/deep/ .u-textarea .u-textarea__field {
    background: #f5f5f5ff;
    text-indent: 16rpx;
    padding: 16rpx;
}
/deep/ .u-textarea .u-textarea__count {
    margin: 0rpx 25rpx 9px 0;
    padding: 8px 4px;
    background: none !important;
}
/deep/ .list-bg{
    border-radius:0 !important;
    margin: 20rpx 0 0 0 !important;
}
/deep/ .btn-box {
    left: 52rpx !important;
}
</style>
